<template>
  <div class="city-plan-panel">
    <el-scrollbar>
      <div class="panel-title">
        <img :src="TitleIcon" />
        <span>城市规划</span>
      </div>

      <div class="bimNav-title">
        <div
          @click="toolItemClickHandle(item)"
          v-for="(item, index) in toolData"
          :key="index"
          :class="{
            'is-active': activeTool === item.value
          }"
        >
          {{ item.label }}
          <p class="line"></p>
        </div>
      </div>
      <div>
        <!-- 头部 -->
        <!--        <div class="flex-x main-center">-->
        <!--          <div-->
        <!--            class="header flex-x cross-center"-->
        <!--            style="margin-top: 0"-->
        <!--          >-->
        <!--            <div-->
        <!--              class="header-icon flex-x main-center cross-center"-->
        <!--            >-->
        <!--              <img-->
        <!--                class="background"-->
        <!--                :src="GuihuaBackground"-->
        <!--                alt="规划面积背景"-->
        <!--              />-->
        <!--              <img-->
        <!--                class="center"-->
        <!--                :src="Guihua"-->
        <!--                alt="规划面积"-->
        <!--              />-->
        <!--            </div>-->
        <!--            <div-->
        <!--              class="header-area-wrapper flex-x main-around cross-center"-->
        <!--              v-if="currentChildItem === 0"-->
        <!--            >-->
        <!--              <span class="header-title">规划面积</span>-->
        <!--              <p class="area">-->
        <!--                60.4-->
        <!--                <span class="unit">{{-->
        <!--                  squareKilometerSymbol-->
        <!--                }}</span>-->
        <!--              </p>-->
        <!--            </div>-->
        <!--            <div-->
        <!--              class="header-area-wrapper flex-x main-around cross-center"-->
        <!--              v-if="currentChildItem === 1"-->
        <!--            >-->
        <!--              <span class="header-title">规划面积</span>-->
        <!--              <p class="area">-->
        <!--                29.16-->
        <!--                <span class="unit">{{-->
        <!--                  squareKilometerSymbol-->
        <!--                }}</span>-->
        <!--              </p>-->
        <!--            </div>-->
        <!--          </div>-->
        <!--        </div>-->
        <!--        <img-->
        <!--          class="line-separator"-->
        <!--          :src="LineSeparator"-->
        <!--          alt="分割线"-->
        <!--        />-->
        <!-- 规划期 -->
        <div class="other-wrapper flex-y">
          <div class="title flex-x cross-center">
            <img
              class="title-prefix"
              :src="TitlePrefix"
              alt="标题前缀"
            />
            <span>规划期：2021-2035</span>
          </div>
          <plan-stepper />
        </div>
        <img
          class="line-separator"
          :src="LineSeparator"
          alt="分割线"
        />
        <!-- 空间结构 -->
        <div
          v-if="currentChildItem === 0"
          class="other-wrapper flex-y"
        >
          <div class="title flex-x cross-center">
            <img
              class="title-prefix"
              :src="TitlePrefix"
              alt="标题前缀"
            />
            <span>空间结构：三区五园五谷</span>
          </div>
          <div class="space-structure flex-y cross-start">
            <div class="space-structure-title">
              <span class="space-structure-title-item"
                >区(15-20k㎡)</span
              >
              <span class="space-structure-title-item"
                >园(3-5k㎡)</span
              >
              <span class="space-structure-title-item"
                >谷(约1k㎡)</span
              >
            </div>

            <img
              class="space-structure-image"
              :src="SpaceStructure"
            />
          </div>
        </div>
        <!-- 规划指标 -->
        <div v-else class="other-wrapper flex-y">
          <div class="title flex-x cross-center">
            <img
              class="title-prefix"
              :src="TitlePrefix"
              alt="标题前缀"
            />
            <span>规划指标</span>
          </div>
          <div class="plan-target">
            <div class="plan-target-item">
              <div class="plan-target-item-icon">
                <img
                  class="background"
                  :src="PlanTargetBackground"
                  alt="规划指标背景"
                />
                <Icon
                  name="changzhurenkou"
                  font-size="20"
                  color="white"
                />
              </div>
              <span class="title">人口规模</span>
              <p class="value">
                25.5 <span class="unit">万人</span>
              </p>
            </div>

            <div class="plan-target-item">
              <div class="plan-target-item-icon">
                <img
                  class="background"
                  :src="PlanTargetBackground"
                  alt="规划指标背景"
                />
                <Icon
                  name="jianzhuyongdi"
                  font-size="20"
                  color="white"
                />
              </div>
              <span class="title">用地规模</span>
              <p class="value">
                26.86
                <span class="unit">{{
                  squareKilometerSymbol
                }}</span>
              </p>
            </div>

            <div class="plan-target-item">
              <div class="plan-target-item-icon">
                <img
                  class="background"
                  :src="PlanTargetBackground"
                  alt="规划指标背景"
                />
                <Icon
                  name="jianzhumianji"
                  font-size="20"
                  color="white"
                />
              </div>
              <span class="title">经营性用地</span>
              <p class="value">
                12.57
                <span class="unit">{{
                  squareKilometerSymbol
                }}</span>
              </p>
            </div>
          </div>
        </div>
        <img
          class="line-separator"
          :src="LineSeparator"
          alt="分割线"
        />
        <div
          class="chart-wrapper flex-y"
          v-if="currentChildItem === 0"
        >
          <div class="bimNavArea-title">
            <div
              @click="toolItemClickHandleArea(item)"
              v-for="(item, index) in toolData1"
              :key="index"
              :class="{
                'is-active': activeTool1 === item.value
              }"
            >
              {{ item.label }}
              <p class="line"></p>
            </div>
          </div>
          <div
            class="chart-wrapper-content flex-y cross-center"
            v-if="activeTool1 === 'all'"
          >
            <chart
              chart-id="city-play-type-1-chart1"
              :chart-height="200"
              chart-width="100%"
              :options="chart1Options"
            />
            <div
              class="line-item"
              v-for="(item, index) in chartList"
              :key="index"
            >
              <div class="item-top">
                <div
                  class="legend-round-icon"
                  :style="{
                    backgroundColor: colorList[index]
                  }"
                ></div>
                <span style="flex: 1">{{ item.name }}</span>
                <span class="right">{{
                  item.percent
                }}</span>
                <span class="right"
                  >{{ item.value
                  }}<span style="font-weight: 400"
                    >公顷</span
                  ></span
                >
              </div>
            </div>
          </div>
          <div
            class="chart-wrapper-content flex-y cross-center"
            v-if="activeTool1 === 'city'"
          >
            <chart
              chart-id="city-play-type-1-chart1"
              :chart-height="200"
              chart-width="100%"
              :options="chart2Options"
            />
            <div
              class="line-item"
              v-for="(item, index) in chartList1"
              :key="index"
            >
              <div class="item-top">
                <div
                  class="legend-round-icon"
                  :style="{
                    backgroundColor: colorList[index]
                  }"
                ></div>
                <span style="flex: 1">{{ item.name }}</span>
                <span class="right">{{
                  item.percent
                }}</span>
                <span class="right"
                  >{{ item.value
                  }}<span style="font-weight: 400"
                    >公顷</span
                  ></span
                >
              </div>
            </div>
          </div>
        </div>

        <!-- 控规单元 -->
        <div
          v-if="currentChildItem === 1"
          class="plan-unit flex-y"
        >
          <div class="title flex-x cross-center">
            <img
              class="title-prefix"
              :src="TitlePrefix"
              alt="标题前缀"
            />
            <span>控规单元</span>
          </div>
          <div
            class="plan-unit-item flex-x main-between cross-center"
            :class="{ first: index === 0 }"
            v-for="(item, index) in planUnitData"
            :key="index"
          >
            <span>{{ item.a }}</span>
            <span>{{ item.b }}</span>
          </div>
        </div>

        <img
          v-if="currentChildItem === 1"
          class="line-separator"
          :src="LineSeparator"
          alt="分割线"
        />

        <div
          class="chart-wrapper flex-y"
          v-if="currentChildItem === 1"
        >
          <div class="title flex-x cross-center">
            <img
              class="title-prefix"
              :src="TitlePrefix"
              alt="标题前缀"
            />
            <span>用地规划</span>
          </div>
          <div
            class="chart-wrapper-content flex-y cross-center"
          >
            <div
              class="line-item"
              v-for="(item, index) in chartList2"
              :key="index"
            >
              <div
                class="item-top"
                style="margin-bottom: 6px"
              >
                <span style="flex: 1">{{ item.name }}</span>
                <span class="right"
                  >{{ item.value
                  }}<span style="font-weight: 400"
                    >公顷</span
                  ></span
                >
                <span class="right"></span>
              </div>
              <div class="item-bottom">
                <div
                  :style="{
                    width:
                      (item.value / 648.35).toFixed(4) *
                        100 +
                      '%'
                  }"
                ></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import PlanStepper from '@/components/planStepper'
import Chart from '@/components/chart/index'
import Icon from '@/components/icon/index'
import TitleIcon from '@/assets/img/logo.png'
import { squareKilometer } from '@/utils/constant'
import GuihuaBackground from '@/assets/img/guihua-area-background.png'
import Guihua from '@/assets/img/guihua-area.png'
import LineSeparator from '@/assets/img/line-separator.png'
import TitlePrefix from '@/assets/img/title-prefix.png'
import SpaceStructure from '@/assets/img/space-structure.png'
import PlanTargetBackground from '@/assets/img/plan-target-background.png'

export default {
  name: 'CityPlanPanel',
  components: {
    PlanStepper,
    Chart,
    Icon
  },
  data() {
    return {
      TitleIcon,
      squareKilometerSymbol: squareKilometer,
      GuihuaBackground,
      Guihua,
      LineSeparator,
      TitlePrefix,
      SpaceStructure,
      PlanTargetBackground,
      toolData: [
        {
          label: '总体规划',
          value: 'topic',
          index: 0
        },
        {
          label: '详细规划',
          value: 'data',
          index: 1
        }
      ],
      activeTool: 'topic',
      toolData1: [
        {
          label: '全域用地规划',
          value: 'all'
        },
        {
          label: '中心城区用地规划',
          value: 'city'
        }
      ],
      activeTool1: 'all',
      currentChildItem: 0,
      planUnitData: [
        {
          a: '智造示范区',
          b: `16.86${squareKilometer}`
        },
        {
          a: '国际科教城北单元',
          b: `12.3${squareKilometer}`
        }
      ],
      colorList: [
        '#FFA862',
        '#2663FF',
        '#20F6C6',
        '#FFDDA2',
        '#FF8080',
        '#00FF6C',
        '#FFF600',
        '#B1832B',
        '#00C0FF',
        '#B0FFE8',
        '#00FFFF'
      ],
      chartList: [
        {
          value: 8.26,
          name: '住宅、商业用地',
          percent: '14%'
        },
        { value: 10.05, name: '工业用地', percent: '17%' },
        {
          value: 4.2,
          name: '公共管理与公共服务设施用地',
          percent: '7%'
        },
        {
          value: 8.09,
          name: '公用设施及道路用地',
          percent: '13%'
        },
        { value: 4.24, name: '绿地及水域', percent: '7%' },
        { value: 9.56, name: '基本农田', percent: '16%' },
        { value: 16.01, name: '农林用地', percent: '27%' }
      ],
      chartList1: [
        {
          value: 841.29,
          name: '交通运输用地',
          percent: '25.78%'
        },
        {
          value: 818.71,
          name: '工矿用地',
          percent: '25.09%'
        },
        {
          value: 586.61,
          name: '居住用地',
          percent: '17.98%'
        },
        {
          value: 431.65,
          name: '公共管理与公共服务用地',
          percent: '13.23%'
        },
        {
          value: 418.41,
          name: '绿地与开敞空间用地',
          percent: '12.82%'
        },
        {
          value: 113.64,
          name: '商业服务用地',
          percent: '3.84%'
        },
        { value: 19.5, name: '其他用地', percent: '0.60%' },
        {
          value: 17.38,
          name: '留白用地',
          percent: '0.53%'
        },
        {
          value: 16.22,
          name: '公用设施用地',
          percent: '0.50%'
        },
        { value: 0, name: '仓储用地', percent: '0%' },
        { value: 0, name: '特殊用地', percent: '0%' }
      ],
      chartList2: [
        {
          value: 648.35,
          name: '交通设施用地',
          percent: '22.23%'
        },
        {
          value: 631.9,
          name: '一类工业用地',
          percent: '21.67%'
        },
        {
          value: 379.7,
          name: '居住用地',
          percent: '13.02%'
        },
        {
          value: 366.65,
          name: '公共管理与公共服务设施用地',
          percent: '12.57%'
        },
        {
          value: 361.73,
          name: '绿地与广场用地',
          percent: '12.40%'
        },
        {
          value: 229.26,
          name: '非建设用地',
          percent: '7.89%'
        },
        {
          value: 161.91,
          name: '住兼商用地',
          percent: '5.55%'
        },
        {
          value: 84.03,
          name: '商业服务业设施用地',
          percent: '2.88%'
        },
        {
          value: 32.81,
          name: '新型产业用地',
          percent: '1.13%'
        },
        {
          value: 19.13,
          name: '公用设施用地',
          percent: '0.66%'
        }
      ],
      chart1Options: {
        title: {
          text: '6042.83',
          left: 'center',
          top: '35%',
          textStyle: {
            color: '#fff',
            fontSize: '16px'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b} <br/> {c}公顷 ({d}%)',
          confine: true
        },
        color: [
          '#FFA862',
          '#2663FF',
          '#20F6C6',
          '#FFDDA2',
          '#FF8080',
          '#00FF6C',
          '#FFF600',
          '#B1832B',
          '#00C0FF',
          '#B0FFE8',
          '#00FFFF'
        ],
        graphic: {
          type: 'text',
          left: 'center',
          top: '55%',
          style: {
            text: '公顷',
            fill: '#fff',
            fontSize: '14px'
          }
        },
        series: [
          {
            name: '用地规划',
            type: 'pie',
            radius: ['70%', '90%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              color: 'white',
              alignTo: 'none',
              formatter: '{d}%'
            },
            labelLayout: {
              hideOverlap: true
            },
            labelLine: {
              length: 5,
              length2: 10
            },
            emphasis: {
              scaleSize: 3
            },
            data: [
              { value: 8.26, name: '住宅、商业用地' },
              { value: 10.05, name: '工业用地' },
              {
                value: 4.2,
                name: '公共管理与公共服务设施用地'
              },
              { value: 8.09, name: '公用设施及道路用地' },
              { value: 4.24, name: '绿地及水域' },
              { value: 9.56, name: '基本农田' },
              { value: 16.01, name: '农林用地' }
            ]
          }
        ]
      },
      chart2Options: {
        title: {
          text: '3243.91',
          left: 'center',
          top: '35%',
          textStyle: {
            color: '#fff',
            fontSize: '16px'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b} <br/> {c}公顷 ({d}%)',
          confine: true
        },
        color: [
          '#FFA862',
          '#2663FF',
          '#20F6C6',
          '#FFDDA2',
          '#FF8080',
          '#00FF6C',
          '#FFF600',
          '#B1832B',
          '#00C0FF',
          '#B0FFE8',
          '#00FFFF'
        ],
        graphic: {
          type: 'text',
          left: 'center',
          top: '55%',
          style: {
            text: '公顷',
            fill: '#fff',
            fontSize: '14px'
          }
        },
        series: [
          {
            name: '产业布局',
            type: 'pie',
            radius: ['70%', '90%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              color: 'white',
              alignTo: 'none',
              formatter: '{d}%'
            },
            labelLayout: {
              hideOverlap: true
            },
            labelLine: {
              length: 5,
              length2: 10
            },
            emphasis: {
              scaleSize: 3
            },
            data: [
              { value: 841.29, name: '交通运输用地' },
              { value: 818.71, name: '工矿用地' },
              { value: 586.61, name: '居住用地' },
              {
                value: 431.65,
                name: '公共管理与公共服务用地'
              },
              { value: 418.41, name: '绿地与开敞空间用地' },
              { value: 113.64, name: '商业服务用地' },
              { value: 19.5, name: '其他用地' },
              { value: 17.38, name: '留白用地' },
              { value: 16.22, name: '公用设施用地' },
              { value: 0, name: '仓储用地' },
              { value: 0, name: '特殊用地' }
            ]
          }
        ]
      }
    }
  },
  methods: {
    toolItemClickHandle(data) {
      const { value, index } = data
      this.activeTool =
        this.activeTool === value ? undefined : value
      this.currentChildItem = index
    },
    toolItemClickHandleArea(data) {
      const { value } = data
      this.activeTool1 =
        this.activeTool1 === value ? undefined : value
    }
  }
}
</script>

<style lang="scss" scoped>
.city-plan-panel {
  background-color: rgba(7, 13, 35, 0.5);

  ::v-deep {
    .el-scrollbar {
      height: 100%;

      &__wrap {
        overflow-x: hidden;
      }

      &__view {
        padding-right: 8px;
      }
    }
  }

  .panel-title {
    margin-bottom: 20px;
    display: flex;
    align-items: center;

    img {
      width: 34px;
      height: 34px;
    }

    span {
      margin-left: 20px;
      font-size: 24px;
      color: white;
      font-weight: 800;
    }
  }

  .header {
    position: relative;
    margin: 10px 20px 0 10px;
    width: 100%;

    &-area-wrapper {
      position: absolute;
      left: 45px;
      right: 0;
      height: 56px;
      background-image: url('~@/assets/img/area-wrapper-background.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }

    &-title {
      font-size: 16px;
      font-weight: bold;
      background: linear-gradient(
        180deg,
        white 0%,
        #a4bbdd 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-left: 40px;
    }

    .area {
      font-size: 22px;
      font-weight: bold;
      color: white;
      margin-right: 30px;
    }

    .unit {
      font-size: 14px;
      font-weight: 400;
      color: white;
    }

    &-icon {
      width: 90px;
      height: 90px;
      min-width: 90px;
      min-height: 90px;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 2;

      img.background {
        position: absolute;
        left: 0;
        top: 0;
        width: 90px;
        height: 90px;
      }

      img.center {
        width: 34px;
        height: 34px;
        z-index: 1;
      }
    }
  }

  .line-separator {
    width: 100%;
    object-fit: cover;
    padding-right: 8px;
    margin-top: 20px;
  }

  .chart-wrapper {
    padding: 10px 10px 10px 10px;

    &:last-of-type {
      padding-bottom: 20px;
    }

    &-content {
      margin-top: 10px;

      .line-item {
        width: 100%;

        .item-top {
          display: flex;
          align-items: center;
          width: 100%;
          height: 26px;
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #ffffff;
          line-height: 28px;
          position: relative;

          .legend-round-icon {
            display: inline-block;
            width: 12px;
            height: 12px;
            margin-right: 12px;
          }

          .right {
            float: right;
            font-family: DIN;
            font-weight: bold;

            &:last-child {
              position: absolute;
              right: 20%;
            }
          }

          .left-span {
            position: absolute;
            left: 50%;
          }
        }

        .item-bottom {
          width: 100%;
          height: 3px;
          background-color: rgba(0, 0, 0, 0.5);

          div {
            height: 100%;
            background: linear-gradient(
              90deg,
              #0072ca,
              #00ffff
            );
          }
        }
      }
    }

    .legend {
      &:not(:last-of-type) {
        margin-bottom: 4px;
      }

      &-round-icon {
        width: 7px;
        height: 7px;
        margin-right: 3px;

        &.blue {
          background-color: #696dff;
        }

        &.light-blue {
          background-color: #00ffff;
        }

        &.green {
          background-color: #00d075;
        }

        &.orange {
          background-color: #ffa862;
        }

        &.yellow {
          background-color: #ffdda2;
        }
      }

      &-title {
        font-size: 12px;
        font-weight: 400;
        color: white;
        margin-right: 6px;
      }

      &-value {
        font-size: 14px;
        font-weight: bold;
        color: white;
      }
    }

    .chart-title {
      font-size: 12px;
      font-weight: 400;
      color: #d2e6f0;
      align-self: flex-end;
      margin-top: 20px;
    }
  }

  .title {
    &-prefix {
      position: relative;
      top: 2px;
      width: 6px;
      height: 16px;
      margin-right: 5px;
      object-fit: fill;
    }

    span {
      font-size: 18px;
      font-weight: 800;
      line-height: 18px;
      background: linear-gradient(
        180deg,
        white 0%,
        #a4bbdd 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .other-wrapper {
    margin-top: 20px;
    padding-right: 10px;
    //padding: 10px 10px 0 10px;
  }

  .plan-stepper {
    margin-top: 16px;
  }

  .space-structure {
    margin-top: 15px;

    &-title {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      &-item {
        font-size: 14px;
        font-weight: 400;
        color: #d2e6f0;
      }
    }

    &-image {
      width: 298px;
      margin: 10px 0;
      align-self: center;
    }
  }

  .plan-target {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    margin-top: 27px;

    &-item {
      display: flex;
      flex-direction: column;
      align-items: center;

      &-icon {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 86px;
        height: 86px;

        .background {
          position: absolute;
          top: 0;
          left: 0;
          width: 86px;
          height: 86px;
        }
      }

      .title {
        font-size: 14px;
        line-height: 14px;
        color: white;
      }

      .value {
        margin-top: 16px;
        font-size: 16px;
        line-height: 16px;
        font-weight: 500;
        color: white;

        .unit {
          font-size: 12px;
          color: white;
        }
      }
    }
  }

  .plan-unit {
    padding: 22px 10px 38px 10px;

    .title {
      margin-bottom: 18px;
    }

    &-item {
      height: 44px;
      padding: 0 22px 0 13px;

      &.first {
        background-image: url('~@/assets/img/area-wrapper-background.png');
        font-size: 14px;
        color: #d2e6f0;
      }

      &:not(.first) {
        background-color: #ffffff10;
        font-size: 14px;
        color: white;
      }

      &:not(:last-of-type) {
        margin-bottom: 3px;
      }

      .title {
        margin-bottom: 18px;
      }
    }
  }

  .bimNav {
    &-title {
      display: flex;
      height: 40px;
      line-height: 40px;

      > div {
        cursor: pointer;
        font-size: 18px;
        line-height: 33px;
        font-family: PingFang SC;
        font-weight: 800;
        color: white;

        &:first-child {
          margin-left: 5px;
          margin-right: 20px;
        }
      }

      .is-active {
        color: rgba(26, 217, 255, 1);
      }
    }
  }

  .bimNavArea {
    &-title {
      display: flex;
      justify-content: center;
      align-items: center;
      // background: url('../../../assets/bim/bim_right_top@2x.png');
      height: 33px;
      line-height: 33px;
      font-weight: 800;
      color: #ffffff;
      font-family: PingFang SC;
      margin-bottom: 7px;

      > div {
        position: relative;
        //margin-right: 10px;
        /*padding-bottom: 10px;*/
        cursor: pointer;
        font-size: 16px;
        // text-shadow: 0px 2px 2px #0C141D;
        //background: linear-gradient(
        //  180deg,
        //  #ffffff 0%,
        //  #a4bbdd 100%
        //);
        //-webkit-background-clip: text;
        //-webkit-text-fill-color: transparent;

        &:first-child {
          margin-right: 30px;
        }
      }

      .is-active {
        //background: url('../../../assets/bim/floor_check@2x.png');
        //background-size: 100% 100%;
        color: rgba(26, 217, 255, 1);
        //text-shadow: 0 3px 5px rgba(0, 0, 0, 0.35);
        //background: linear-gradient(
        //  180deg,
        //  #00cefb 0%,
        //  #65faff 100%
        //);
        //-webkit-background-clip: text;
        //-webkit-text-fill-color: transparent;

        &::after {
          content: '';
          position: absolute;
          left: 25%;
          bottom: 0;
          width: 50%;
          height: 2px;
          background: #00cefb;
        }
      }
    }
  }
}
</style>
